// 用来做异步加载
import { Suspense } from 'react';

import { Switch, Route } from 'react-router-dom';
import admin from './routes/admin';
import login from './routes/login';

export const createLoginRoute = () => {
  return (
    // Suspense 配合lazy实现路由懒加载，他有一个参数为fallback,里面可以在完成加载之前做一些效果
    <Suspense fallback={<div>loading...</div>}>
      <Route {...login} />
    </Suspense>
  )
}
// admin子路由
export const createChildrenAdminRoute = () => {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Switch>
        {
          admin.children.map(item => (
            <Route path={item.path} component={item.component} key={item.path} />
          ))
        }
      </Switch>
    </Suspense>
  )
}

export const createAdminRoute = () => {
  return (
    // Suspense 配合lazy实现路由懒加载，他有一个参数为fallback,里面可以在完成加载之前做一些效果
    <Suspense fallback={<div>loading...</div>}>
      {/* 如果我们在admin组件中，里面含有未定义的东西，用...展开的话可能会导致报错，所以我们采用对应写法的方式，防止出错 */}
      <Route path={admin.path} component={admin.component} />
    </Suspense>
  )
}

// 我们在这里将它们进行了合并，在index中我只需要调用一次就可以了

export const createRoute = () => {
  return (
    <>
      {createLoginRoute()}
      {createAdminRoute()}
    </>
  )
}